<template>
	<view class="container">
		<u-navbar :is-back="true" title="设置" back-icon-color='#333333' height="50" :border-bottom="false">
		</u-navbar>
		<view class="list">
			<view class="eye">
				<text>护眼模式</text>
				<view class="toggle" :style="{background:bgColor}" @click="changeColor">
					<text :style="{left:distance}"></text>
				</view>
			</view>
			<view class="password">
				<text>密码</text>
				<text>XXXXXX</text>
				<image src="../../static/tupian78.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="quit">
			<view class="" @click.stop="quit_login">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: '#ccc',
				distance: '2rpx',
			}
		},
		methods: {
			changeColor() {
				if (this.bgColor == '#ccc') {
					this.bgColor = '#1CCC8B';
					this.distance = '40rpx';
				} else {
					this.bgColor = '#ccc';
					this.distance = '2rpx';
				}
			},
			quit_login() {
				uni.removeStorage({
					key: 'host',
					success: function(res) {
						console.log('host数据移除成功')
					}
				}); //退出登录将host数据清除
				uni.removeStorage({
					key: 'token',
					success: function(res) {
						console.log('token数据移除成功')
					}
				}); //退出登录将token数据清除
				uni.removeStorage({
					key: 'user_id',
					success: function(res) {
						console.log('user_id数据移除成功')
					}
				}); //退出登录将user_id数据清除
				uni.removeStorage({
					key: 'school_district_id',
					success: function(res) {
						console.log('school_district_id数据移除成功')
					}
				}); //退出登录将school_district_id数据清除
				uni.removeStorage({
					key: 'full_name',
					success: function(res) {
						console.log('full_name数据移除成功')
					}
				}); //退出登录将full_name数据清除
				this.$toLink('../login/login', {});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		background: #F2F2F2;

		.list {
			width: 710rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
			border-radius: 12rpx;
			background: #fff;

			.eye {
				height: 85rpx;
				width: 94%;
				margin-left: 3%;
				justify-content: flex-start;
				align-items: center;
				display: flex;
				border-bottom: 1px solid #F2F2F2;

				text {
					&:nth-child(1) {
						width: 580rpx;
						color: #333333;
						font-size: 30rpx;
					}
				}

				.toggle {
					width: 77rpx;
					height: 35rpx;
					position: relative;
					background: #1CCC8B;
					border-radius: 56rpx;

					text {
						&:nth-child(1) {
							position: absolute;
							width: 35rpx;
							height: 35rpx;
							border-radius: 50%;
							background: #fff;
							left: 40rpx;
							top: 0rpx;
						}
					}
				}
			}

			.password {
				height: 85rpx;
				width: 94%;
				margin-left: 3%;
				justify-content: flex-start;
				align-items: center;
				display: flex;

				text {
					&:nth-child(1) {
						color: #666666;
						font-size: 30rpx;
						width: 500rpx;
					}

					&:nth-child(2) {
						color: #333333;
						width: 140rpx;
						font-size: 30rpx;
					}
				}

				image {
					&:nth-child(3) {
						width: 20rpx;
					}
				}

			}
		}

		.quit {
			width: 100%;
			height: 800rpx;
			display: flex;
			justify-content: center;

			view {
				&:nth-child(1) {
					margin-top: 700rpx;
					border-radius: 40rpx;
					width: 600rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					background: #fff;
					color: #ec554e;
					border: 1rpx solid #ec554e;
					font-size: 30rpx;
				}
			}
		}

	}
</style>
